<template>
  <div class="robot-box">
    <a-row>
      <div class="gutter-box">
        <div class="row-title">
          <div class="left-title">设备数据统计</div>
        </div>
        <div class="device-static">
          <div class="one-static" v-for="item in staticList">
            <i class="iconfont" :class="item.icon"></i>
            <div class="row-line">
              <div>{{ item.title }}</div>
            </div>
            <div class="static-num">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </a-row>
    <div class="center-box">
      <div class="center-one-box">
        <div class="row-title">
          <div>清扫作业</div>
          <div class="time-box">
            <div
              @click="changeClean(1)"
              :class="currentClean == 1 ? 'select-time' : ''"
            >
              今日
            </div>
            <span class="drive">|</span>
            <div
              @click="changeClean(2)"
              :class="currentClean == 2 ? 'select-time' : ''"
            >
              昨日
            </div>
          </div>
        </div>
        <div class="echarts-box" id="cleanEcharts"></div>
      </div>
      <div class="center-one-box">
        <div class="row-title">
          <div>设备状态</div>
          <div class="time-box">
            <div
              @click="changeStatus(1)"
              :class="currentStatus == 1 ? 'select-time' : ''"
            >
              今日
            </div>
            <span class="drive">|</span>
            <div
              @click="changeStatus(2)"
              :class="currentStatus == 2 ? 'select-time' : ''"
            >
              昨日
            </div>
          </div>
        </div>
        <div class="echarts-box" id="statusEcharts"></div>
      </div>
      <div class="center-one-box">
        <div class="row-title">
          <div>机器人出仓率</div>
          <div class="time-box">
            <div
              @click="changeRobot(1)"
              :class="currentRobot == 1 ? 'select-time' : ''"
            >
              今日
            </div>
            <span class="drive">|</span>
            <div
              @click="changeRobot(2)"
              :class="currentRobot == 2 ? 'select-time' : ''"
            >
              昨日
            </div>
          </div>
        </div>
        <div class="echarts-box" id="robotEcharts"></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="col-box">
        <div class="row-title">
          <div class="left-title">故障数</div>
        </div>
        <div class="bottom-echarts" id="faultEchart"></div>
      </div>
      <div class="col-box">
        <div class="row-title">
          <div class="left-title">历史出仓率</div>
        </div>
        <div class="bottom-echarts" id="ratioEchart"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  cleanEcharts,
  statusEcharts,
  robotOutEcharts,
  faultEcharts,
  ratioEcharts,
} from "../config/robotHomeEcharts";
import moment from "moment";
import {
  robotDashboardStatus,
  robotDashboardDataStatistics,
  robotCleanWork,
  robotOutRate,
  robotAlarmNumber,
  historyOutRate,
} from "@/api/device.js";
export default {
  data() {
    return {
      staticList: [
        {
          value: "0",
          title: "运行时长(小时)",
          prop: "hour",
          icon: "icon-clock",
        },
        {
          value: "0",
          title: "清扫次数(次)",
          prop: "count",
          icon: "icon-shujuji",
        },
        {
          value: "0",
          title: "清扫面积(平方米)",
          prop: "totalArea",
          icon: "icon-yuanqumianji",
        },
        {
          value: "0",
          title: "清扫价值(人·天)",
          prop: "cost",
          icon: "icon-line-exchangecnyrenminbizhuanhuan",
        },
      ],
      currentClean: 1,
      currentStatus: 1,
      currentRobot: 1,
    };
  },
  methods: {
    // 图形化监控
    changeClean(index) {
      if (this.currentClean == index) return;
      this.currentClean = index;
      this.getCleanWork();
    },
    changeStatus(index) {
      if (this.currentStatus == index) return;
      this.currentStatus = index;
      this.getRobotStatus();
    },
    changeRobot(index) {
      if (this.currentRobot == index) return;
      this.currentRobot = index;
      this.getRobotOutRate();
    },
    initCleanEcharts(data) {
      const clean = document.getElementById("cleanEcharts");
      const cleanEchart = this.echarts.init(clean, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      cleanEchart.setOption(cleanEcharts(data));
    },

    initStatusEcharts(data) {
      const status = document.getElementById("statusEcharts");
      const statusEchart = this.echarts.init(status, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      statusEchart.setOption(statusEcharts(data));
    },

    initRobotEcharts(value) {
      const robot = document.getElementById("robotEcharts");
      const robotEchart = this.echarts.init(robot, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      robotEchart.setOption(robotOutEcharts(value));
    },

    initFaultEchart(xData, yData) {
      const fault = document.getElementById("faultEchart");
      const faultEchart = this.echarts.init(fault, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      faultEchart.setOption(faultEcharts(xData, yData));
    },

    initRatioEchart(xData, yData) {
      const ratio = document.getElementById("ratioEchart");
      const ratioEchart = this.echarts.init(ratio, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      ratioEchart.setOption(ratioEcharts(xData, yData));
    },

    getRobotStatus() {
      let params = {
        createTime:
          this.currentStatus == 1
            ? moment().format("YYYY-MM-DD 00:00:00")
            : moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      };
      robotDashboardStatus(params).then((res) => {
        console.log(Object.keys(res.data)?.length);
        let statusList = [
          {
            value: "0",
            prop: "提示",
          },
          {
            value: "0",
            prop: "告警",
          },
          {
            value: "0",
            prop: "故障",
          },
        ];
        statusList.forEach((item) => {
          if (item.prop in res.data) {
            item.value = res.data[item.prop];
          }
        });
        this.initStatusEcharts([
          statusList[0].value,
          statusList[1].value,
          statusList[2].value,
        ]);
      });
    },
    getStatic() {
      robotDashboardDataStatistics().then((res) => {
        this.staticList.forEach((item) => {
          if (item.prop in res.data) {
            item.value = res.data[item.prop];
          }
        });
      });
    },
    getCleanWork() {
      let params = {
        createTime:
          this.currentClean == 1
            ? moment().format("YYYY-MM-DD 00:00:00")
            : moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      };
      robotCleanWork(params).then((res) => {
        this.initCleanEcharts([res.data.successClean, res.data.alarmClean]);
      });
    },
    getRobotOutRate() {
      let params = {
        createTime:
          this.currentRobot == 1
            ? moment().format("YYYY-MM-DD 00:00:00")
            : moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      };
      robotOutRate(params).then((res) => {
        this.initRobotEcharts(parseFloat(res.data.outRate));
      });
    },
    getRobotAlarmNumber() {
      robotAlarmNumber().then((res) => {
        let allData = [];
        let xData = [],
          yData = [];
        for (let k in res.data) {
          allData.push({
            time: k,
            value: res.data[k],
          });
        }
        allData.sort((a, b) => {
          return moment(a.time).valueOf() - moment(b.time).valueOf();
        });
        allData.forEach((item) => {
          xData.push(moment(item.time).format("MM-DD"));
          yData.push(item.value);
        });
        this.initFaultEchart(xData, yData);
      });
    },
    getHistoryOutRate() {
      historyOutRate().then((res) => {
        let allData = [];
        let xData = [],
          yData = [];
        for (let k in res.data) {
          allData.push({
            time: k,
            value: res.data[k],
          });
        }
        allData.sort((a, b) => {
          return moment(a.time).valueOf() - moment(b.time).valueOf();
        });
        allData.forEach((item) => {
          xData.push(moment(item.time).format("MM-DD"));
          yData.push(parseFloat(item.value) / 100);
        });
        this.initRatioEchart(xData, yData);
        console.log(xData, yData, "---getHistoryOutRate");
      });
    },
  },
  mounted() {
    // this.initCleanEcharts();
    // this.initStatusEcharts();
    // this.initRobotEcharts();
    // this.initFaultEchart();
    // this.initRatioEchart();
    this.getRobotStatus();
    this.getStatic();
    this.getCleanWork();
    this.getRobotOutRate();
    this.getRobotAlarmNumber();
    this.getHistoryOutRate();
  },
};
</script>
<style lang="less" scoped>
.robot-box {
  padding: 16px;
  box-sizing: border-box;
  height: 100%;
  // padding-bottom: 40px;
  overflow-y: auto;
  .row-title {
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 16px;
    .left-title {
      color: #252b3a;
    }
  }
  .gutter-box {
    height: 240px;
    background: #fff;
    margin-bottom: 24px;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 5px 10px 0 rgba(4, 14, 31, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .device-static {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 80px;
      flex-grow: 1;
      padding: 0 80px;
      box-sizing: border-box;
      .one-static {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        align-items: center;
        i {
          font-size: 48px;
        }
        .row-line {
          position: relative;
          height: 1px;
          background: #dcdfe6;
          width: 100%;
          color: #333;
          font-size: 14px;
          margin: 20px 0;
          div {
            padding: 0 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            background: #fff;
            transform: translate(-50%, -50%);
          }
        }
        .static-num {
          font-size: 30px;
          font-weight: bolder;
          color: #333;
          white-space: nowrap;
        }
        // background: #252b3a;
      }
    }
  }
  .center-box {
    margin-bottom: 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    .center-one-box {
      height: 340px;
      padding-top: 12px;
      box-sizing: border-box;
      box-shadow: 0 5px 10px 0 rgba(4, 14, 31, 0.2);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      .row-title {
        display: flex;
        padding: 0 16px;
        justify-content: space-between;
        font-size: 14px;
        margin-bottom: 16px;
        font-weight: 600;
        .left-title {
          color: #252b3a;
        }
        .time-box {
          display: flex;
          align-items: center;
          .drive {
            margin: 0 10px;
          }
          .select-time {
            color: #480fff;
          }
          div {
            cursor: pointer;
          }
        }
      }
      .echarts-box {
        flex-grow: 1;
      }
    }
  }
  .bottom-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-bottom: 24px;
    .col-box {
      height: 340px;
      box-shadow: 0 5px 10px 0 rgba(4, 14, 31, 0.2);
      border-radius: 10px;
      padding-top: 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .bottom-echarts {
        flex-grow: 1;
      }
    }
  }
}
</style>